<template>
  <div>
    <div class="Echarts">
      <div id="main" style="width: 1200px; height: 350px"></div>
      <!-- <el-table :data="tableData" style="width: 30%; margin-left: 400px" border>
      <el-table-column prop="id" label="订单编号" width="100"></el-table-column>
      <el-table-column
        prop="userId"
        label="用户名称"
        width="100"
      ></el-table-column>
      <el-table-column prop="total" label="订单总金额"></el-table-column>
    </el-table> -->
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "order",
  data() {
    return {
      tableData: [
        {
          id: 1,
          userId: 3,
          total: 2000,
        },
        {
          id: 1,
          userId: 3,
          total: 2000,
        },
        {
          id: 1,
          userId: 3,
          total: 2000,
        },
      ],
      numData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    };
  },
  mounted() {
    this.myCharts();
  },
  methods: {
    makeRandomData() {
      for (let i = 0; i < 9; i++) {
        this.numData[i] = this.numData[i + 1];
      }
      this.numData[9] = Math.random();
      return this.numData;
    },
    myCharts() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      var option;
      var base = +new Date(2014, 9, 3);
      var oneDay = 1000;
      var date = [];
      var data = [];
      var now = new Date();
      function addData(shift) {
        axios.get("http://localhost:9080/api/order/test").then((res) => {
          // console.log(res);
          now =
            [now.getMonth() + 1, now.getDate()].join("-") +
            " " +
            [now.getHours(), now.getMinutes(), now.getSeconds()].join(":");
          // console.log(now);
          date.push(now);
          data.push(res.data.data);
          // console.log(res);
          if (shift) {
            date.shift();
            data.shift();
          }
          now = new Date(+new Date(now) + oneDay);
        });
      }
      for (var i = 1; i < 50; i++) {
        date.push(" ");
        data.push(1);
      }
      option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          boundaryGap: [0, "50%"],
          type: "value",
        },
        series: [
          {
            name: "成交",
            type: "line",
            symbol: "none",
            stack: "a",
            smooth: true,
            areaStyle: {
              normal: {},
            },
            data: data,
          },
        ],
      };
      setInterval(function () {
        addData(true);
        myChart.setOption({
          xAxis: {
            data: date,
          },
          series: [
            {
              name: "成交",
              data: data,
            },
          ],
        });
      }, 230);

      option && myChart.setOption(option);
    },
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        Animation: true,
        xAxis: {
          show: false,
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "line",
            areaStyle: {},
          },
        ],
      };
      myChart.hideLoading(); // 隐藏
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      setInterval(() => {
        myChart.setOption({
          series: {
            data: this.makeRandomData(),
          },
        });
      }, 1000);
    },
  },
};
</script>

<style scoped>
</style>
